
<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      check-strictly
      :props="defaultProps">
    </el-tree>

    
    <div class="buttons">
      <el-button type="primary" @click="submit">保存</el-button>      
    </div>
  </div>
</template>



<script>
import {tree} from "@/api/sys/permission"
import {getPermission,savePermission} from "@/api/sys/role"
  export default {
    props:[
      'row'
    ],
    watch:{
      row:{
        handler:function(val){
          if(val){
            this.rowData = val;
            this.getPermission();
          }
        },
        immediate:true
      }
    },
     data() {
      return {
        rowData:{},
        data: [],
        defaultProps: {
          children: 'sub',
          label: 'title'
        }
      };
    },
    created(){
      tree().then(res=>{
        this.data = res;
        console.log(res,'tree')
      })
    },
    methods: {
      getPermission(){
        getPermission(this.rowData.id).then(res=>{
          this.$refs.tree.setCheckedKeys(res)
        })
      },            
      submit(){
        let keys = this.$refs.tree.getCheckedKeys()
        savePermission({id:this.rowData.id,permission:keys}).then(res=>{
          this.$message.success("保存成功")
          this.$emit("success")
        })
      }
    },

   
  };
</script>